<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Yoka365 </title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!-- http://www.bootcdn.cn/pace/ -->
	<link href="http://cdn.bootcss.com/pace/1.0.2/themes/black/pace-theme-center-circle.css" rel="stylesheet" />

    <link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet-theme-ios.min.css" rel="stylesheet">

  </head>
  <body>

    <header class="bar bar-nav">
		<h1 class="title">我的打卡记录</h1>
		<a href="/wx/user-scan?openid={$openid}" class="icon icon-compose pull-right" data-ignore="push"></a>
    </header>

	<div class="bar bar-standard bar-header-secondary">
		<a href="#chooseDateModal" class="btn btn-block btn-primary">选择日期</a>
	</div>

	<div class="content">
	<ul class="table-view" id="recordList">
	</ul>
	</div>

	<!-- 
	<div class="bar bar-standard bar-footer">
		<a class="pull-left icon icon-left" id="btnPre">上一页</a>
		<a class="pull-right icon icon-right" id="btnNext">下一页</a>
		<div class="segmented-control" style="border: none;">
			<span class="badge" id="pageNum">1/3</span>
		</div>
	</div>
	-->

	<div id="chooseDateModal" class="modal">
	  <header class="bar bar-nav">
		<a class="icon icon-left-nav pull-left" href="#chooseDateModal"></a>
		<h1 class="title">选择日期范围</h1>
	  </header>

	  <div class="content">
		<ul class="table-view" id="dateRangeList">
		  {foreach item=one from=$dateRangeList}
		  <li class="table-view-cell media">
			<a class="navigate-right" value="{$one}">
			  <div class="media-body">
				{$one}
			  </div>
			</a>
		  </li>
		  {/foreach}
		</ul>
	  </div>
	</div>

  </body>
</html>

<script src="http://cdn.bootcss.com/fastclick/1.0.3/fastclick.min.js"></script>
<script src="http://cdn.bootcss.com/moment.js/2.8.4/moment.min.js"></script>
<script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdn.bootcss.com/ratchet/2.0.2/js/ratchet.min.js"></script>
<script src="http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js"></script>
<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>

<script type="text/javascript">
var openid = '{$openid}';

{literal}
if(!String.prototype.format){
	String.prototype.format = function() {
		var args = Array.prototype.slice.call(arguments);
		return this.replace(/\{(\d+)\}/g, 
			function(m, i){
				return args[i];
			});
	};
}

$(function(){
	FastClick.attach(document.body);

	var showRecordList = function(date){
		date = date || '';

		var recordList = $('#recordList');
		recordList.empty();
		var tpl = '<li class="table-view-cell">{0}<span class="pull-right scaner">{1}</span></li>';

		Pace.track(function(){
			$.get('/wx/user-scan-query-with-date?date=' + date + '&openid=' + openid, function(data){
				var str = '';
				_.each(data.ll, function(it){
					str += tpl.format(moment(it.dd).format('YYYY-MM-DD hh:mm:ss'), it.scanerName);
				});

				recordList.html(str);
			});
		});
	};
	showRecordList();

//	$('#btnPre').click(function(e){
//	
//	});
//	$('#btnNext').click(function(e){
//	
//	});

	$('#dateRangeList').on('click', 'a', function(e){
		var target = $(e.target);
		if(!target.is('a')){
			target = target.closest('a');
		}
		var date = target.attr('value');

		$('#chooseDateModal').removeClass('active');
		showRecordList(date);

		return false;
	});
});
</script>
{/literal}